<template>
	<view class="l-bond-list">
		<u-sticky :offset-top="offset_top">
			<view class="u-border-bottom u-p-20 u-bg-white order">
				<!-- <u-tabs name="cate_name" count="cate_count" :offset="[10,36]" :list="tabs" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
				<u-row>
					<u-col span="3" text-align="center">
						<view class="u-flex u-row-center" @tap="orderClick(0)">
							<text>涨幅</text>
							<view class="u-flex u-flex-col icon u-type-info-disabled">
								<u-icon name="arrow-up-fill" :color="order=='desc' && orderType==0 ? '#ff0000':''"></u-icon>
								<u-icon name="arrow-down-fill" :color="order=='asc' && orderType==0 ? '#ff0000':''"></u-icon>
							</view>
						</view>
					</u-col>
					<u-col span="3" text-align="center">
						<view class="u-flex u-row-center" @tap="orderClick(1)">
							<text>溢价</text>
							<view class="u-flex u-flex-col icon u-type-info-disabled">
								<u-icon name="arrow-up-fill" :color="order=='desc' && orderType==1 ? '#ff0000':''"></u-icon>
								<u-icon name="arrow-down-fill" :color="order=='asc' && orderType==1 ? '#ff0000':''"></u-icon>
							</view>
						</view>
					</u-col>
					<u-col span="3" text-align="center">
						<view class="u-flex u-row-center" @tap="orderClick(2)">
							<text>成交额</text>
							<view class="u-flex u-flex-col icon u-type-info-disabled">
								<u-icon name="arrow-up-fill" :color="order=='desc' && orderType==2 ? '#ff0000':''"></u-icon>
								<u-icon name="arrow-down-fill" :color="order=='asc' && orderType==2 ? '#ff0000':''"></u-icon>
							</view>
						</view>
					</u-col>
					<u-col span="3" text-align="center">
						<view class="u-flex u-row-center" @tap="orderClick(3)">
							<text>现价</text>
							<view class="u-flex u-flex-col icon u-type-info-disabled">
								<u-icon name="arrow-up-fill" :color="order=='desc' && orderType==3 ? '#ff0000':''"></u-icon>
								<u-icon name="arrow-down-fill" :color="order=='asc' && orderType==3 ? '#ff0000':''"></u-icon>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</u-sticky>
		<view class="item u-m-b-20 u-bg-white" v-for="(f, k) in lists" :key="k" @tap="toBondItem(f.bond_code)">
			<view class="u-flex u-p-20 u-border-bottom">
				<view class="u-flex-1">
					<!-- <text class="market-icon u-font-12 SZ">泸</text> -->
					<l-market :code="f.type"></l-market>
					<text class="u-p-l-10">{{f.SECURITY_NAME_ABBR}}</text>
					<text class="u-font-20 u-p-l-10 u-type-info-dark">{{f.bond_code}}</text>
				</view>
				<view class="u-row-right u-type-error u-font-bold">{{f.options ?f.options.RATING:''}} <u-icon name="arrow-right u-type-info-dark"></u-icon></view>
			</view>
			<view class="info u-font-26 u-p-lr-10 u-p-tb-26">
				<u-row gutter="20" align="top">
					<u-col span="3">
						<view :class="[$u.func.priceCls(f,'zd')]">
							<view class="u-font-bold u-font-40 u-flex">
								<text class="u-col-top" >{{$u.func.bondPrice(f, f.options?f.options.spj:0)}}</text>
							</view>
							<view class="u-flex u-font-20">
								<view class="u-flex-6">{{f.j_bfb/100}}%</view>
								<view class="u-flex-6 u-text-right">{{$u.func.bondDs(f.j_ds, f.type)}}</view>
							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex">
							<text class="u-type-info-dark">今开</text>
							<view class="u-flex-12 u-text-right" :class="[$u.func.priceCls(f, 'j_k')]">{{$u.func.bondPrice(f,f.options.j_k ? f.options.j_k:0)}}</view>
						</view>
						<view class="u-flex u-m-t-12">
							<text class="u-type-info-dark">总手</text>
							<view class="u-flex-12 u-text-right">{{$u.func.bondCl(f.c_l)}}</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex">
							<text class="u-type-info-dark">最高</text>
							<view class="u-flex-12 u-text-right" :class="[$u.func.priceCls(f, 'max')]">{{$u.func.bondPrice(f,f.options.max ? f.options.max:0)}}</view>
						</view>
						<view class="u-flex u-m-t-12">
							<text class="u-type-info-dark">金额</text>
							<view class="u-flex-12 u-text-right">{{$u.func.bondCe(f.c_e)}}</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex">
							<text class="u-type-info-dark">最低</text>
							<view class="u-flex-12 u-text-right" :class="[$u.func.priceCls(f, 'min')]">{{$u.func.bondPrice(f,f.options.min ? f.options.min:0)}}</view>
						</view>
						
						<view class="u-flex u-m-t-12">
							<text class="u-type-info-dark">振幅</text>
							<view class="u-flex-12 u-text-right" :class="[$u.func.priceCls(f, 'zd')]">{{$u.func.bondZf(f)}}%</view>
						</view>
					</u-col>
				</u-row>
				
				<u-row gutter="20">
					<u-col span="3">
						<view class="u-flex u-font-22 u-m-t-12">
							<text class="u-type-info-dark">昨收</text>
							<view class="u-flex-12 u-text-right">{{$u.func.bondPrice(f,f.options.z_s ? f.options.z_s:0)}}</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex u-font-22 u-m-t-12">
							<text class="u-type-info-dark">转股价值</text>
							<view class="u-flex-12 u-text-right">{{f.options.TRANSFER_VALUE ? f.options.TRANSFER_VALUE.toFixed(2) :'-'}}</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex u-font-22 u-m-t-12">
							<text class="u-type-info-dark">转股溢价</text>
							<view class="u-flex-12 u-text-right" :class="[$u.func.redOrGreen(f.TRANSFER_PREMIUM_RATIO)]">{{$u.func.getVal(f,'TRANSFER_PREMIUM_RATIO')}}%</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-text-right u-m-t-12"><u-tag text="更多" type="info" size="mini"></u-tag></view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="u-p-20"><u-loadmore :status="status" iconColor="#2979FF"/></view>
	</view>
</template>

<script>
	
	import deepMerge from "@/uview-ui/libs/function/deepMerge";
	
	let systemInfo = uni.getSystemInfoSync();
	
	export default{
		props:{
			// lists:{
			// 	type:Array,
			// 	default: ()=> {
			// 		return [];
			// 	  }
			// },
			// status:{
			// 	type:String,
			// 	default:"loading"
			// },
			api:{
				type:String,
				default:'indexList'
			},
			uri:{
				type:Object,
				default:()=>{
					return {};
				}
			},
			offsetTop:{
				type:Number,
				default:0
			}
		},
		data(){
			return {
				lists:[],
				lock: false,
				orderType:0,//排序:0=>涨幅，1=>溢价,2=>成交额，3=>最新
				order:'desc',
				pageNum:1,
				lastPage:1,
				status:'loading',
				offset_top:0
			}
		},
		watch:{
			offsetTop(){
				if(this.offsetTop){
				this.offset_top = this.offsetTop;
				}
				console.log('watch1:',this.offset_top)
			}
		},
		mounted() {
			//#ifdef MP-WEIXIN
			if(!this.offsetTop){
				let navbarHeight = this.navbarHeight();
				this.offset_top = (navbarHeight+systemInfo.statusBarHeight) * 750 / systemInfo.screenWidth;
			}
			//#endif
			console.log('mouted:',this.offset_top)
			this.dataApi().then(data =>{
				console.log(data)
				this.lists = data.data;
				this.lastPage = data.last_page
				this.lock = false;
				if(data.data.length < data.page_size) this.status = 'nomore';
			})
		},
		methods:{
			dataApi(page, order, orderType){
				let param = {
					o: order ? order:'desc', 
					of:orderType ? orderType:0, 
					page:page?page:1,
				};
				console.log('uri:', this.uri)
				param = deepMerge(param, this.uri);
				
				console.log('hp:',param)
				return this.$u.api[this.api](param);
			},
			orderClick(type){
				
				if(this.orderType == type){
					this.order = this.order == 'desc' ? 'asc':'desc';
				}
				
				this.orderType = type;
				
				this.dataApi(1,this.order, type).then(data =>{
					console.log(data)
					this.lists = data.data;
				})
			},
			reachBottom(){
				console.log(444)
				if(this.lock) return false;
				
				const page = this.pageNum +1;
						
				this.lock = true;
				console.log(page, this.lastPage)
				if(page > this.lastPage){
					this.status = 'nomore';
					return false;
				}
				
				this.dataApi(page, this.order, this.orderType).then(data =>{
					console.log(data)
					this.lists = this.lists.concat(data.data);
					this.lastPage = data.last_page;
					this.pageNum = page;
					this.lock = false;
					if(data.data.length < data.page_size) this.status = 'nomore';
				});
			},
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 44;
				// #endif
				// #ifdef MP
				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			},
			toBondItem(bond_code){
				this.$u.route('/pages/bond/item',{"code":bond_code});
			}
		}
	}
</script>

<style scoped>
	.l-bond-list .item .info{
		padding: 26rpx 10rpx;
	}
	.l-bond-list .order .icon{
		transform:scale(.6);
	}
</style>
